<template>
  <div id="app">
<!--    <img src="./assets/logo.png">-->
<!--    使用组件-->
<!--    <HelloWorld/>-->
<!--    <MyHome/>-->
    <MyHeader/>
    <MyBody :bodymsg="msg" @inputdatachange="change"/>
    <MyFooter/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import MyHome from './components/MyHome'
import MyHeader from './components/MyHeader'
import MyBody from './components/MyBody'
import MyFooter from './components/MyFooter'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyHome,
    MyHeader,
    MyBody,
    MyFooter
  },
  data () {
    return {
      msg: '来自于主组件的数据'
    }
  },
  methods: {
    change (newVal) {
      console.log('新的数据是:' + newVal)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
